
<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Report</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Customer List</i></h5>
                            </div>
                           <div class="ibox-content">
                            <form class="form-horizontal" id="actcon_report">
                              <div class="form-group">
                                  <label class="col-lg-3 control-label">Status</label>
                                      <div class="col-lg-6 input">
                                      <select id="st" class="form-control" name="stat_type">
                                          <option value="ACT">Active</option>
                                          <option value="INACT">In-Active</option>
                                          <option value="PND">Pending</option>
                                      </select>
                                      </div>    
                              </div>
                              <div class="form-group">
                                  <label class="col-lg-3 control-label">Zone</label>
                                      <div class="col-lg-6 input">
                                      <select id="cz" class="form-control" name="cus_zone">
                                          <?php foreach ($zones as $zone) { ?>
                                          <option value="<?php echo $zone->zone_name; ?>"><?php echo $zone->zone_name; ?></option>
                                          <?php } ?>
                                      </select>
                                      </div>    
                              </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label"></label>
                                     <div class="col-sm-10">
                                       <div class="row">
                                       <div class="col-md-10">
                                       <p class="text-center">
                                        <button class="btn btn-primary btn-outline btn-md m-t-n-xs" id="get-status-ac" type="button"><i class="fa fa-check fa-fw"></i> Get Status</button></p>
                                        </div>
                                      </div>
                                     </div>
                                  </div>
                             </form>
                           </div><!-- END OF IBOX CONTENT -->
                           <div id="result">
                              <div class="ibox-content">
                                <div class="row">
                                    <div class="col-xs-9">
                                    <div class="btn-group">
                                      <a id="to_pdf" href="#" class="btn btn-link" ><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                      <a id="to_excel" href="#" class="btn btn-link" ><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                  </div>
                                     <!--  <div class="col-xs-3">
                                        <a id="to_pdf" class="btn btn-w-m btn-outline btn-link" href="#"><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                      </div>
                                      <div class="col-xs-3">
                                        <a id="to_excel" class="btn btn-w-m btn-outline btn-link" href='#'><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                      </div>
                                      <div class="col-xs-3">
                                        <div class="">
                                            <button class="btn btn-w-m btn-outline btn-link dropdown-toggle" id="to_mail"><i class="fa fa-envelope-o fa-fw"></i> <small>Send to Email</small></button>
                                        </div>
                                      </div> -->
                                    </div>
                                </div>
                             </div><!-- END OF IBOX CONTENT -->
                             <br>
                             <p id="search_values"></p>
                             <div class="horizontal-slide">
                              <div class="table-responsive">
                                <table data-limit-navigation="5" data-page-size="20" data-filter="#filter" data-page-navigation=".pagination" class="footable table table-bordered table-hover" id="tbl_org" style="width:100%">
                               <!-- <table class="footable table table-bordered table-hover"> -->
                               
                                                
                                <thead>
                                  <tr style="background-color: blue !important;"> 
                                                    <td></td>
                                                    <td style='border: none !important; text-align:right;'>
                                                      <strong>Total Count:<strong>
                                                    </td >
                                                    <td style='border: none !important; text-align:right;' id="total_c">
                                                    </td>
                                                </tr>
                                  <tr>
                                  <tr>
                                    <th data-sort-ignore="true" ></th>
                                    <th data-type="alpha">Account Number</th>
                                    <th data-type="alpha">Acount Name</th>
                                  </tr>
                                </thead>
                                <tbody id="result-table">
                                  <tr>
                                  </tr>
                                </tbody>
                                <tfoot >
                                                <tr>
                          
                                                    <td colspan="4" style='border: none !important;'>
                                                        <ul class="pagination pull-left"></ul>
                                                    </td>                                                    
                                                   
                                                </tr>

                                            </tfoot>
                              </table>
                              </div>
                            </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<script>
  $(document).ready(function(){
    $(".chosen-select").chosen({width:"100%;"});
    $('#to_excel').hide();  $('#to_pdf').hide();
    $('#get-status-ac').click(function(){
      var tolc = 0;
          $.ajax({
                        type: "POST",
                         url: "<?php echo base_url($this->session->userdata('forajax')); ?>/get_status_ac",
                        data: $('#actcon_report').serialize(),
                        dataType: 'json',
                        success: function(data){
                           $('#get-status-ac').removeAttr('disabled');
                            var tmp = "";
                            console.log(data.length);
                            if(data.length == 0){
                               $('#result-table').html('<tr><td colspan="02" align="center">No Result</td></tr>');
                               $('#to_excel').hide();
                               $('#to_pdf').hide();
                                $('#search_values').html('');
                                $('#search_values').hide();
                            }else{
                              $('#search_values').show();
                               $('#search_values').html('Reference From: <strong>' + $('#st').val() + '</strong>');
                              $.each(data,function(i,item){
                                  tolc++;
                                  tmp += '<tr><td></td><td align="center">'+ data[i].acct_num +'</td><td align="left">'+ data[i].acct_name +'</td></tr>' 
                                                              
                                });
                              $('#result-table').html(tmp).trigger('footable_redraw');
                              $('#to_excel').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_excel?stat_type='+$('select[name=stat_type]').val()+'&total='+tolc+'&zones='+$('select[name=cus_zone]').val());
                              $('#to_pdf').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_pdf?stat_type='+$('select[name=stat_type]').val()+'&total='+tolc+'&zones='+$('select[name=cus_zone]').val());
                              $('#to_excel').show();
                              $('#to_pdf').show();
                            }
                            $('#result').show();
                            $('#total_c').html('<strong>' + tolc + '</strong>');
                        },
                        complete: function() {
                           $('#get-status-ac').removeAttr('disabled');
                        },
                        beforeSend: function(){
                           $('#get-status-ac').attr('disabled',true);
                           //$('#result').hide();
                        }
                    });
        });

  });
</script>